<template>
  <view class="bg-container padding-sm">
    <view class="main-container" v-if="educationDetail">
      <!-- 文章头部 -->
      <view class="main-header">
        <!-- 文章标题 -->
        <uni-section class="mb-10" :title="educationDetail.title ? educationDetail.title : '' "
          :sub-title="educationDetail.publishTime ? educationDetail.publishTime : '' " titleFontSize="16px"
          subTitleFontSize="14px" type="line">
        </uni-section>
      </view>

      <!-- 默认图片 -->
      <view class="main-pic">
        <image v-if="educationDetail.defaultPic" class="default-img" :src="educationDetail.defaultPic" />
        <image v-else class="default-img" :src="defaultPic" />
      </view>

      <!-- 文章内容 -->
      <view class="main-body">
        <!-- 文章内容 -->
        <view class="main-content">
          <u-parse v-show="educationDetail.content" :content="educationDetail.content ? educationDetail.content : ''"
            @preview="preview" @navigate="navigate"></u-parse>
          <view v-show="!educationDetail.content"><empty-page text="暂无科普内容" /></view>
          <!-- <rich-text :nodes="educationDetail.content"></rich-text> -->
        </view>
      </view>

      <!-- 文章底角 -->
      <view class="main-footer">
        <text class="author-text">
           {{ educationDetail.subTitle }} {{educationDetail.doctorName}}医生\n
          {{ educationDetail.footerTime }}
        </text>
      </view>
      <view style="height: 20px;"></view>
    </view>
    <view v-else>
      <empty-page container-height="100px" text="暂无医疗科普详情信息" />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        defaultPic: '/static/default/not-find.png',
        id: undefined,
        educationDetail: {},
      };
    },
    onLoad(options) {
      this.id = options.id
      this.init()
    },
    methods: {
      preview(e) {
        console.log(e)
      },
      navigate(e) {
        console.log(e)
      },
      init() {
        this.getContentDetail();
      },
      async getContentDetail() {
        // 发起请求
        const id = this.id;
        const {
          data: res
        } = await uni.$http.get(`/education/detail/${id}`);
        console.log(res.code);
        console.log(res.code !== 200)
        if (res.code !== 200) return uni.$showMsg()
        this.educationDetail = res.data
      },
    }
  }
</script>

<style lang="scss">
  .bg-container {
    background-color: #ffffff;
    height: 100vh;
    width: 100vw;

    .main-container {
      background-color: #ffffff;


      // 默认图片
      .main-pic {
        margin-bottom: 20px;
        width: 100%;
        height: 150px;

        .default-img {
          height: 150px;
          width: 100%;
        }
      }

      // 发布底角
      .main-footer {
        margin-top: 20px;
        color: #6a6a6a;
        font-size: 13px;
        text-align: right;

        .author-text {
          white-space: pre-wrap;
        }
      }
    }
  }
</style>